<template>
  <BasicDrawer v-bind="$attrs" @register="registerBaseDrawer" title="导入Word中的表(支持 doc | docx)" width="700px" destroyOnClose showFooter>
    <BasicForm @register="registerForm" @submit="handleSubmit"/>
    <template #footer>
      <a-button @click="handleSubmit(true)" type="primary" :loading="loading" style="margin-right: 0.9rem">确定</a-button>
      <PopConfirmButton title="确定放弃选择？" @confirm="closeDrawer" okText="确定" cancelText="取消">取消</PopConfirmButton>
    </template>
  </BasicDrawer>
</template>

<script lang="ts" setup>
  import {ref, onMounted, unref} from 'vue';
  import {BasicForm, useForm} from '/@/components/Form';
  import {listAllDataSource} from '/@/views/onlineDev/datasource/api';
  import { BasicDrawer, useDrawer, useDrawerInner } from '/@/components/Drawer';
  import {importDocumentTable} from '../codeGen.api';
  import {importDocumnetTableFormSchema} from '../codeGen.data';
  import {PopConfirmButton} from '/@/components/Button';
  import { useMessage } from '/@/hooks/web/useMessage'
  const { createMessage } = useMessage()
  const loading = ref(false);
  const checkedKeys = ref<Array<string | number>>([]);
  const emit = defineEmits(['register', 'success']);
  const [registerForm, {resetFields, setFieldsValue, updateSchema, validate}] = useForm({
    schemas: importDocumnetTableFormSchema,
    showActionButtonGroup: false,
  });

  // const [registerTable, {reload, getForm, setProps}] = useTable({
  //   title: '',
  //   api: listDbTable,
  //   columns: tableColumns,
  //   formConfig: {
  //     showResetButton: false,
  //     labelWidth: 60,
  //     schemas: searchTableFormSchema,
  //     autoSubmitOnEnter:  true,
  //     actionColOptions: { pull: 2 },
  //   },
  //   /**
  //    * 组件加载后是否立即请求接口，在 api 有传的情况下，如果为 false，需要自行使用 reload 加载表格数据
  //    */
  //   immediate: false,
  //   striped: true,
  //   useSearchForm: true,
  //   showTableSetting: true,
  //   clickToRowSelect: false,
  //   bordered: true,
  //   showIndexColumn: false,
  //   // tableSetting: {fullScreen: true},
  //   canResize: false,
  //   rowKey: 'tableName'
  // });

  onMounted(async () => {
    
  })

  const [registerBaseDrawer, {setDrawerProps, closeDrawer}] = useDrawerInner(async (data) => {
    // 重置表单
    await resetFields()
    // 将数据放到下拉框上
    const resp = await listAllDataSource()
    const options = unref(resp)
    if (options && options.length > 0) {
      await updateSchema({
        field: 'datasourceId',
        componentProps: {
          optionFilterProp: "label",
          showSearch: true,
          options,
        },
      });
    }
  });

  /**
   * 选择列配置
   */
  const rowSelection = {
    type: 'checkbox',
    columnWidth: 50,
    selectedRowKeys: checkedKeys,
    onChange: onSelectChange
  }

  /**
   * 选择事件
   */
  function onSelectChange(selectedRowKeys: (string | number)[], selectionRows) {
    checkedKeys.value = selectedRowKeys;
  }

  /**
   * 提交
   */
   async function handleSubmit(exit) {
    // 参数是tables
    loading.value = true;
    try {
      const fromParams = await validate()
      console.log("form: ", fromParams)
      await importDocumentTable({...fromParams})
      emit("success")
      exit && closeDrawer()
      createMessage.success("导入成功")
    } catch (e) {
      console.log(e)
    } finally {
      loading.value = false;
    }
  }

</script>